<template>
  <div class="p-1 box-border w-screen h-screen">
    <div class="flex">
      <m-svg-icon name="left" class="w-2 h-2 m-1" color="#707070" @click="handleBack"></m-svg-icon>
      <search v-model="keyWord" @input="searchKeyWords" @focus="resetKeyWords" @blur="closeKeyWords" isSearchType
        class="flex-1"></search>
    </div>
    <div
      class="absolute transition-all left-0 right-0 text-[20px] p-1 text-zinc-500 h-[60%] overflow-x-hidden overflow-y-auto"
      v-show="isOpenAutoComplete">
      <div class="bg-zinc-800 rounded-lg">
        <div class="mb-1 p-1" v-for="item in keyWordList" :key="item.id" @mousedown="searchBookByKey(item)">{{
          item.keyword }}</div>
      </div>
    </div>
    <div class="p-1">
      <div class="text-zinc-500 text-[20px] pb-1">搜索历史</div>
      <div class="flex flex-wrap text-zinc-400 text-[18px] gap-1">
        <div class="bg-zinc-800 border-none rounded-lg px-2" v-for="(item, index) in getHistoryKeywordList" :key="index"
          @click="searchKeyWords(item.historykeyword)">
          <span>{{ item.historykeyword }}</span>
          <span style="padding-left: 10px" @click.stop="deleteHistoryKeyWord(item.id)">删除</span>
        </div>
      </div>
    </div>
    <div class="p-1">
      <div class="text-zinc-500 text-[20px] pb-1">搜索发现</div>
      <div class="flex flex-wrap text-zinc-400 text-[18px] gap-1">
        <div class="bg-zinc-800 border-none rounded-lg px-2" v-for="(item, index) in getHistoryKeyWordObjList"
          :key="index">{{ item.historykeyword }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import search from '@/components/search/index.vue'
import SearchService from './service/index.ts'
const { isOpenAutoComplete, searchKeyWords, closeKeyWords, resetKeyWords, searchBookByKey, deleteHistoryKeyWord, init } = SearchService
const { keyWord, keyWordList, getHistoryKeywordList, getHistoryKeyWordObjList } = SearchService.storeRefs
init()

const router = useRouter()

const handleBack = () => {
  router.back()
}
</script>
